<template>
	<view class="w">
		<view class="wp">
			<view class="c_list">
				<image class="logo" :src="orderInfo.orderGoods[0].thumb"></image>
				<view class="title">{{orderInfo.orderGoods[0].goodstitle}}</view>
			</view>
			<view class="c_list">
				<view>
					<view>退款数量</view>
					<view class="small">全部订单数退款</view>
				</view>
				<view>{{orderInfo.orderGoods[0].total||1}}</view>
			</view>
			<view class="c_list">
				<view>
					<view>退款金额</view>
					<view class="small">1-3个工作日退还至原支付方，以实际退款金额为准</view>
				</view>
				<view class="red"><text class="small">￥</text>{{applyprice}}</view>
			</view>
			<!-- <view class="c_list">
				<view class="">处理方式</view>
				<picker @change="bindPickerChange" :value="index1" :range="list1" :disabled="disabledbol">
					<view class="uni-input">{{list1[index1]}}</view>
				</picker>
			</view> -->
			<view class="c_list">
				<view class="releav">
					退款原因
					<view class="required">*</view>
				</view>
				<picker @change="bindPickerChange2" :value="index2" :range="list2">
					<view class="uni-input">{{list2[index2]}}</view>
				</picker>
			</view>
			<view class="c_list c_line">
				<view class="c_listtitle">
					退款说明
				</view>
				<textarea name="" v-model="text" id="" cols="30" rows="10" placeholder="请输入退款说明"></textarea>
			</view>
			<view class="c_list c_line">
				<view class="c_listtitle">
					上传凭证
				</view>
				<view class="c_imgs">
					<view class="img_item" v-for="(item,idx) in imgs" @click="previewImg(idx)">
						<image :src="item"  ></image>
						<text @click.stop="deleteImg(idx)">×</text>
					</view>
					<view class="img_item">
						<image src="/static/shizi.jpg" @tap="addimg"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="btn">
			<view>退款金额<text class="red"><text class="small">￥</text>{{applyprice}}</text></view>
			<button type="warn" class="c_btn" @tap="submit">{{info.order.refundstate=='0'?'申请售后':'修改售后'}}</button>
			<button type="warn" v-if="info.order.refundstate!='0'" class="c_btn" @tap="canceltap()">取消售后</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [
					'退款（仅退款不退货）',
					'退货退款',
					'换货'
				],
				index1: 0,
				list2: [
					'不想要了',
					'卖家缺货',
					'拍错了/订单信息错误',
					'其他'
				],
				index2: 0,
				imgs: [],
				id: "",
				refund: "",
				text: "",
				applyprice: "",
				info: {
					order: {}
				},
				orderInfo: [],
				img: '',
				disabledbol: false
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.getRefund();
			this.getOrderInfo();
		},
		methods: {
			getRefund(){
				this.$axios('op/refund', "POST", 'order', {
					orderid: this.id
				}).then(res => {
					if (res.data.code == 200) {
						this.info = res.data.data;
						this.applyprice = res.data.data.showprice;
						if(this.info.refund.content) this.text = this.info.refund.content;
						if(this.info.refund.imgs) this.imgs = this.info.refund.imgs.split(',');
						this.list2.forEach((item,index)=>{
							if(item == this.info.refund.reason){
								this.index2 = index;
							}
						})
						if (this.info.order.status == '1') {
							this.disabledbol = true;
						}
					}
				})
			},
			getOrderInfo(){
				this.$axios('detail/getOrderInfo', "POST", 'order', {
					id: this.id
				}).then(res => {
					if (res.data.code == 200) {
						this.orderInfo = res.data.data;
					}
				})
			},
			// 预览图片
			previewImg(idx){
				uni.previewImage({
					current: idx,
					urls: this.imgs
				})
			},
			canceltap() {
				var that = this;
				that.$axios('op/submitRefund', "POST", 'order', {
					orderid: that.id,
					cancel: 1
				}).then(res => {
					if (res.data.code == 200) {
						uni.showModal({
							title: '取消成功！',
							showCancel: false,
							success() {
								that.$navBack();
							}
						})
					}
				})
			},
			bindPickerChange: function(e) {
				this.index1 = e.target.value
			},
			bindPickerChange2: function(e) {
				this.index2 = e.target.value
			},
			// 选择图片
			addimg() {
				uni.chooseImage({
					count: 9,
					success:res=>{
						var path = res.tempFilePaths;
						path.forEach((image)=>{
							this.realUpload(image);
						})
					}
				})
			},
			// 上传服务器
			realUpload(image){
				let token = uni.getStorageSync('token');
				var that = this;
				let arr = '';
				uni.showLoading({
					title: '上传中,请稍后'
				});
				uni.uploadFile({
					url: that.$url.state.url.upload,
					filePath: image,
					name: 'a',
					header: {
						token: token
					},
					formData: {
						'file': 'a'
					},
					success: upres => {
						let data = JSON.parse(upres.data);
						if (data.code == 200) {
							arr = data.data.url;
							that.imgs.push(arr);
							uni.hideLoading();
						}
					},
					fail() {
						setTimeout(() => {
							that.$api.msg('上传失败，请重试')
						}, 100)
					},
				})
			},
			submit: function() {
				var that = this;
				that.$axios('op/submitRefund', "POST", 'order', {
					orderid: that.info.order.id,
					cancel: 0,
					rtype: that.index1,
					price: that.applyprice,
					content: that.text,
					reason: that.list2[that.index2],
					images: that.imgs
				}).then(res => {
					if (res.data.code == 200) {
						uni.showModal({
							title: '申请成功',
							showCancel: false,
							success() {
								that.$navBack();
							}
						})
					}
				})
			},
			// 删除图片
			deleteImg(e) {
				this.imgs.splice(e, 1);
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #FBF8FE;
	}
	.w{
		padding-bottom: 160rpx;
	}
	.wp{
		background: #fff;
		margin: 30rpx;
		border-radius: 12rpx;
	}
	.releav{
		position: relative;
	}
	.required{
		position: absolute;
		right: -16rpx;
		top: 0;
		color: #AF141D;
		font-size: 28rpx;
		font-weight: bold;
	}
	.red{
		font-size: 36rpx;
		color: #AF141D;
		font-weight: bold;
		.small{
			font-size: 24rpx;
			color: #AF141D!important;
		}
	}
	.c_list {
		display: flex;
		align-items: center;
		padding: 20upx;
		box-sizing: border-box;
		border-bottom: 1px solid #eee;
		font-size: 28rpx;
		color: #333333;
		justify-content: space-between;
		.logo{
			width: 116rpx;
			height: 116rpx;
			border-radius: 12rpx;
			margin-right: 16rpx;
		}
		.title{
			flex: 1;
		}
		picker {
			// flex: 1;
			margin-left: 20upx;
		}
		.small{
			font-size: 20rpx;
			color: #999999;
		}
		
	}
	.c_line{
		display: block;
		textarea{
			border-radius: 12rpx;
			border: 2rpx solid #DEDEDE;
			height: 310rpx;
			width: 100%;
			margin-top: 16rpx;
			padding: 16rpx;
		}
	}

	.c_listtitle {
		margin-right: 20upx;
	}

	.c_lisinfo {
		color: red;
	}

	.c_imgs {
		margin-top: 16rpx;
		display: flex;
		flex-wrap: wrap;
		margin-right: -14rpx;
		.img_item{
			position: relative;
			width: 200rpx;
			height: 200rpx;
			margin-right: 14rpx;
			margin-bottom: 8rpx;
			image{
				width: 100%;
				height: 100%;
			}
			text{
				background: #999;
				border-radius: 50%;
				color: #fff;
				height: 50upx;
				line-height: 40upx;
				font-size: 40upx;
				position: absolute;
				top: -10upx;
				right: -10upx;
				text-align: center;
				width: 50upx;
				opacity: .8;
				z-index: 9;
			}
		}
		
	}
	.btn{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 130rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 26rpx 0rpx rgba(243,232,252,0.5);
		position: fixed;
		bottom: 0;
		padding: 0 30rpx;
		button{
			height: 52rpx;
			line-height: 52rpx;
			background: linear-gradient( 90deg, #A350E8 0%, #4E07A9 100%);
			box-shadow: 0rpx 0rpx 26rpx 0rpx rgba(243,232,252,0.5);
			border-radius: 26rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			padding: 0 30rpx;
			text-align: center;
			margin: 0;
		}
	}
</style>
